﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
    <title>canvas line</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        html,
        body {
            background: #0B1723;
        }
    </style>
</head>

<body>
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="1885"
        height="1034" viewBox="0 0 1885 1034" id="svg">
        <defs>
            <style>
                .cls-1 {
                    stroke: #ff5b16;
                    stroke-width: 1px;
                    filter: url(#outer-glow-1);
                    fill: none;
                    opacity: 0.3;
                    fill-rule: evenodd;
                }
            </style>

            <filter id="outer-glow-1" filterUnits="userSpaceOnUse">
                <feGaussianBlur stdDeviation="1.667" in="SourceAlpha" />
                <feComposite/>
                <feComposite/>
                <feComposite result="outerGlowBlur" />
                <feFlood flood-color="#ff4700" />
                <feComposite operator="in" in2="outerGlowBlur" />
                <feBlend in2="SourceGraphic" result="outerGlow" />
                <feComposite in="SourceGraphic" result="shadowed" />
            </filter>
        </defs>
        <path d="M796.000,181.000 L796.000,242.000 L1212.000,242.000 L1212.000,20.000 L1227.000,5.000 L1624.000,5.000 L1637.000,11.000 L1880.000,11.000 L1880.000,746.000 L1466.000,746.000 L1443.000,767.000 L1443.000,1004.000 L1401.000,1029.000 L986.000,1029.000 L962.000,1009.000 L922.000,1009.000 L922.000,758.000 L907.000,742.000 L482.000,742.000 L482.000,1004.000 L443.000,1028.000 L5.000,1028.000 L5.000,665.000 L42.000,629.000 L254.000,629.000 L284.000,593.000 "
            class="cls-1" />
    </svg>

    <canvas id="myCanvas" width="1885" height="1034"></canvas>
    <script type="text/javascript" src="../build/canvas-line.js"></script>
    <script>
        var svg = document.getElementById('svg'),
            path = svg.lastElementChild,
            totalLength = Math.ceil(path.getTotalLength());
        var pointList = [];
        for (var i = 0; i < totalLength; i++) {
            var point = path.getPointAtLength(i);
            pointList.push([point.x, point.y]);
        }

        var options = {
            lineWidth: .05,
            strokeStyle: '#fff',
            isShowLine: false,
            isAnimate: true,
            radius: 2.7,
            speed: 5,
            data: [{
                turnPoints: null, //[[50,50],[150,250],[400,650]]
                pointList: pointList,
                fillStyle: '#F8B551'
            }],
        };
        var trackLine = new TrackLine(options);
    </script>
</body>

</html>